<template>
  <el-card>
    <!--
        inline: 设置 el-form-item 在一行内进行布局（横向布局）
    -->

    <el-form inline :disabled="disabled">
      <el-form-item label="一级分类">
        <el-select v-model="category1Id" @change="category1ChangeHandler">
          <el-option
            v-for="item in category1"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="二级分类">
        <el-select v-model="category2Id" @change="category2ChangeHandler">
          <el-option
            v-for="item in category2"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="三级分类">
        <el-select v-model="category3Id">
          <el-option
            v-for="item in category3"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "CategorySelector",
});
</script>

<script lang="ts" setup>
import { ref, onMounted, reactive, toRefs } from "vue";
import { useCategorySelectorStore } from "@/stores/categorySelector";
import { storeToRefs } from "pinia";

defineProps<{
  disabled: boolean;
}>();

const categorySelectorStore = useCategorySelectorStore();

const {
  category1,
  category1Id,
  category2,
  category2Id,
  category3,
  category3Id,
} = storeToRefs(categorySelectorStore);
categorySelectorStore.getCategory1();

// onMounted(async () => {
//   // 获取一级分类列表
//   await categorySelectorStore.getCategory1();
//   //   console.log(categorySelectorStore);
// });

// 使用 reactive 定义一个响应式的对象，这的 obj 就像是仓库
// const obj = reactive({
//   attr: ref({ x: 1, y: 2 }),
// });
// 从仓库中解构出来数据
// const { attr } = obj; // const attr = obj.attr;
// console.log(obj.attr.x);
// console.log(attr);
// 我们不能给仓库这个数据直接赋值，这样就会导致 attr 和 obj.attr 不再指向同一个地址
// obj.attr = { x: 10, y: 20 };
// console.log(obj, attr);

// 使用 toRefs 从仓库中解构出来数据
// const { attr } = toRefs(obj); //使用 toRefs 不是简单的赋值
// 如果不使用 toRefs 的话：const attr = obj.attr;
// 如果使用 toRefs 的话：const attr = toRef(obj, 'attr'); => toRef => {get(){}, set() {}}

// console.log(attr);
// obj.attr = { x: 10, y: 20 };
// console.log(obj, attr);

// 理解 toRef
// class R {
//   _originData: any;
//   _attr: any;
//   _value: string;

//   constructor(originData: any, attr: any) {
//     this._originData = originData;
//     this._attr = attr;
//     this._value = originData[attr];
//   }

//   get value(): any {
//     return this._originData[this._attr];
//   }

//   set value(newVal) {
//     this._originData[this._attr] = newVal;
//   }
// }

// function tr(data: any, attr: any) {
//   //   return data[attr];
//   return new R(data, attr);
// }

// const obj2 = { x: 1, y: 2 };
// const x1 = obj2.x;
// // 如果修改了 obj2.x ，x1 会不会变化？
// // obj2.x = 100;
// // console.log(x1, obj2.x);

// // x2 = new R(obj2, "x");
// const x2 = tr(obj2, "x");
// console.log(x2.value);
// obj2.x = 100;
// console.log(x2.value);
// x2.value = 10000;
// console.log(obj2.x);

/**
 * 总结：
 *  toRef或者toRefs的本质并不是直接解构赋值，而是通过返回一个对象，然后通过对象的 get set 来和原数据保持联系的
 */

//当category1的id发生改变的时候触发
function category1ChangeHandler() {
  categorySelectorStore.getCategory2();
}

function category2ChangeHandler() {
  categorySelectorStore.getCategory3();
}
</script>
